import React, { Component } from 'react';
import Chakan from '../../components/Popover/fenlei/chakan'
import Tianjia from '../../components/Popover/fenlei/tianjia'
import Delete from '../../gonggong/delete'
import { Layout, Breadcrumb, Table, Space } from 'antd';
import axios from 'axios'
import { nanoid } from 'nanoid'
const { Header, Content, Footer } = Layout;

class index extends Component {
    state = {
        data: [],
        date: null,
        display: "none",
        canshu:{
            url:"http://localhost:3001/api/typeonedelete",
            title:"删除分类",
            tixing:"您将要删除个分类，确定吗？",
          },
        add:"http://localhost:3001/api/typeoneadd"
    }
    componentDidMount() {
        axios.get("http://localhost:3001/api/fenleione").then((req, res) => {
            let data = []
            req.data.type.map((i, index) => {
                data[index] = {
                    key: nanoid(),
                    name: i
                }
            })
            if (data.length == 0) {
                data = [{ key: nanoid(), name: "空" }]
                this.setState({
                    data,
                    display: "none"
                })
            } else {
                this.setState({
                    data,
                    display: "block"
                })
            }
        })
        const d = new Date()
        const nian = d.getFullYear()
        const yue = d.getMonth() + 1
        const ri = d.getDate()
        const shi = d.getHours()
        const fen = d.getMinutes()
        const date = nian + "年" + yue + "月" + ri + "日" + shi + "时" + fen + "分"
        this.setState({
            date
        })
    }
    gengxin = () => {
        this.componentDidMount()
    }
    render() {
        const columns = [
            {
                title: '一级分类',
                dataIndex: 'name',
                key: 'name',
                ellipsis: true,
                width:"900px"
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => {
                    return (<Space size="middle">
             <Chakan display={this.state.display} history={this.props.history} record={record.name} name="查看二级分类"/>
             <Tianjia add={this.state.add}  gengxin={this.gengxin}   name="添加"/>
             <Delete canshu={this.state.canshu}  gengxin={this.gengxin} url={text.name} name="删除" display={this.state.display}/>
                    </Space>)
                },
            },
        ];

        const { data, date } = this.state
        return (
            <Layout className="site-layout">
                <Header className="site-layout-background" style={{ padding: 0 }} />
                <Content style={{ margin: '0 16px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>home</Breadcrumb.Item>
                        <Breadcrumb.Item>商品分类管理</Breadcrumb.Item>
                    </Breadcrumb>
                    <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                        <Table columns={columns} dataSource={data} />
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>数据更新时间：{date}</Footer>
            </Layout>

        );
    }
}

export default index;